<template>
    <div>
        <carHeader><div class="carHead">购物车</div></carHeader>
        <div id="box">
            <div class="car">
                <div class="fir">
                    <div class="outer l" @click="allCheck()">
                        <div class="inter" v-show="notShow"></div>
                    </div>
                    <div class="l allin">全选</div>
                    <div class="edit" @click="edt()" v-show="edtShow">编辑</div>
                    <div class="edit" @click="edt()" v-show="cplShow">完成</div>
                </div>
                <div v-show="!list.length" class="blk">
                    <div>
                        <van-icon name="shopping-cart-o" size="40" />
                    </div>
                    <p>您的购物车还是空的</p>
                    <button>去逛逛</button>
                </div>
                <ul class="sec" v-show="list.length">
                    <li v-for="(data,index) in list" :key="data.productId" >
                        <div class="outer l single" @click="singleCheck(index)">
                            <div class="inter" v-show="data.selected" ></div>
                        </div>
                        <div class="img l"><img :src="data.image"></div>
                        <div class="rig l">
                            <p>{{data.productName}}</p>
                            <p>{{data.skuName}}</p>
                            <span>￥{{data.price}}</span>
                            <div class="numb">
                                <button @click="data.productNum>1?data.productNum--:data.productNum=1" :disabled="data.productNum===1">-</button>{{data.productNum}}<button @click="data.productNum++">+</button>
                            </div>
                        </div>
                    </li>
                </ul>
            </div>
            <div class="rec" v-if="recList.length">
                <h4>为你推荐</h4>
                <ul>
                    <li v-for="data in recList" :key="data.productId" @click="shopfoo(data.productId)">
                        <div><img :src="data.image" /></div>
                        <p>{{data.name}}</p>
                        <p class="des">{{data.desc}}</p>
                        <span>￥{{data.linePrice/100}}</span>
                    </li>
                </ul>
            </div>
            <div class="final">没有更多了</div>
        </div>
        <div class="sub">
            <div class="outer l" @click="allCheck()">
                <div class="inter" v-show="notShow"></div>
            </div>
            <div class="l allin">全选</div>
            <div v-if="ordShow">
                <button>结算</button>
                <p>￥{{sum}}</p>
                <span>合计：</span>
            </div>
            <button class="del" v-if="delShow" @click="del()">删除</button>
        </div>
    </div>
</template>
<script>
import http from '@/util/http'
import carHeader from '@/views/header/head'
import Vue from 'vue'
import { SubmitBar, Icon } from 'vant'
import { mapState } from 'vuex'
Vue.use(SubmitBar).use(Icon)

export default {
  data () {
    return {
      edtShow: true,
      cplShow: false,
      ordShow: true,
      delShow: false,
      checked: true,
      selList: [],
      recList: [],
      notShow: false,
      list: [
        {
          productId: 1,
          productNum: 1,
          productName: 'dddd',
          price: 123,
          selected: false,
          skuName: '红色',
          image: 'https://mall01.sogoucdn.com/image/2019/08/09/20190809183446_1769.jpg'
        },
        {
          productId: 3,
          productNum: 1,
          productName: 'dddd',
          price: 1273,
          selected: false,
          skuName: '红色',
          image: 'https://mall01.sogoucdn.com/image/2019/08/09/20190809183446_1769.jpg'
        },
        {
          productId: 4,
          productNum: 1,
          productName: 'dddd',
          price: 1723,
          selected: false,
          skuName: '红色',
          image: 'https://mall01.sogoucdn.com/image/2019/08/09/20190809183446_1769.jpg'
        }
      ]
    }
  },
  mounted () {
    console.log(this.shopCarList)
    // const param = new URLSearchParams()
    // param.append('c', 'h5')
    // param.append('s', '20000')
    // param.append('t', '1605267606318')
    // param.append('v', '1.0')
    // for(var attr in this.shopCarList){
    //    this.list.push(this.shopCarList[attr].sku)
    // }

    http({
      url: '/heihei/api/product/product/product_list?c=h5&s=20000&t=1605257682140&v=1.0&category_id=0&sort_field=1&sort_order=2&pn=1&ps=4'
    }).then(res => {
      this.recList = res.data.data.pageList
    })
    // http({

    //   url: '/heihei/api/user/cart/list_product',
    //   method: 'post',
    //   data: param,

    //   headers: {
    //     'Content-Type': 'application/x-www-form-urlencoded'
    //   }
    // }).then(res => {
    //   this.list = res.data.data.productList
    //   console.log(res.data.data.productList)
    // })
  },
  methods: {
    edt () {
      this.ordShow = !this.ordShow
      this.delShow = !this.delShow
      this.edtShow = !this.edtShow
      this.cplShow = !this.cplShow
      // console.log(this.shopCarList)
    },
    del () {
      this.list = this.list.filter(item => item.selected === false)
      this.selList = this.list.filter(item => item.selected === true)
      if (!this.list.length) {
        this.notShow = false
      }
    },
    shopfoo (id) {
      this.$router.push({ path: '/pages/detail/detail', query: { id: id } })
    },
    allCheck () {
      this.notShow = !this.notShow
      this.list.forEach(item => {
        item.selected = this.notShow
      })
      if (this.notShow) {
        this.selList = this.list
      } else {
        this.selList = []
      }
      console.log(this.selList)
    },
    singleCheck (index) {
      this.list[index].selected = !this.list[index].selected
      this.selList = this.list.filter(item => item.selected === true)
      if (this.judge()) {
        this.notShow = true
      } else {
        this.notShow = false
      }
    },
    judge () {
      for (var i = 0; i < this.list.length; i++) {
        if (!this.list[i].selected) {
          return false
        }
      }
      return true
    }
  },
  components: {
    carHeader
  },
  computed: {
    ...mapState(['shopCarList']),
    // ...mapState(['list']),
    sum () {
      var res = 0
      for (var i = 0; i < this.selList.length; i++) {
        res += this.selList[i].price * this.selList[i].productNum
      }
      return res
    }
  }
}
</script>
<style lang="scss" scoped>
.l{
    float:left;
}
.outer{
    margin:10px;
    width: 20px;
    height: 20px;
    border:1px solid #ddd;
    border-radius: 50%;
    background-color: #fff;
    position:relative;
    .inter{
        width: 10px;
        height: 10px;
        position: absolute;
        left:25%;
        top:25%;
        border-radius: 50%;
        background-color: red;
    }
}
    .carHead{
        border-bottom: 1px solid #eee;
    }
    #box{
        width:100%;
        background-color:rgb(241, 240, 240);
        .car{
            width:100%;
            background-color:#fff;
            margin-top:50px;
            margin-bottom:15px;
            .fir{
                width:100%;
                border-bottom:1px solid #eee;
                height:40px;
                .allin{
                    height:40px;
                    line-height:40px;
                    font-size:13px;
                }
                .edit{
                    height:40px;
                    line-height:40px;
                    float:right;
                    margin-right:10px;
                    font-size:13px;
                }
            }
            .sec{
                width: 100%;
                background-color : #fff;
                li{
                    margin:0 10px;
                    padding:10px 0;
                    border-bottom:1px solid #eee;
                    height:120px;
                    .single{
                        margin-top:35px;
                    }
                    .img{
                        width: 100px;
                        height: 100px;
                        border:1px solid red;
                        margin-right:10px;
                        img{
                          width: 100%;
                          height: 100%;
                        }
                    }
                    .rig{
                        p{
                            font-size:12px;
                            margin-bottom: 10px;
                            width:190px;
                        }
                        span{
                            font-size: 14px;
                            color:red;

                        }
                        .numb{
                            float:right;
                            text-align:center;
                            button{
                                width: 30px;
                                height: 30px;
                                font-size: 20px;
                                font-weight: 500;
                                border:none;
                                background-color:#fff;
                            }
                        }
                    }
                }
            }
            .blk{
                height:160px;
                background-color:#fff;
                position:relative;
                div{
                    position:absolute;
                    top:14%;
                    left:43%;
                    width: 100px;
                    height:48px;
                    line-height:48px;
                }
                p{
                    position:absolute;
                    top:50%;
                    left:50%;
                    margin-left:-100px;
                    text-align:center;
                    width: 200px;
                    height:20px;
                    line-height:20px;
                }
                button{
                    position:absolute;
                    top:70%;
                    left:50%;
                    margin-left:-48px;
                    width: 96px;
                    height: 26px;
                    line-height: 26px;
                    border:none;
                    border:1px solid red;
                    text-align: center;
                    font-size: 15px;
                    color:red;
                    background-color: #fff;
                }
            }
        }
        .rec{
            height:532px;
            background-color: #fff;
            h4{
                height:25px;
                line-height:25px;
                margin-left:10px;
                font-weight: 400;
            }
            ul{
                margin:10px;
                display:flex;
                justify-content: space-between;
                flex-wrap: wrap;
                li{
                    margin-bottom:15px;
                    div{
                        width: 165px;
                        height:165px;
                        margin-bottom:5px;
                        img{
                            width: 160px;
                            height: 160px;
                        }
                    }
                    p{
                        height:20px;
                        line-height: 20px;
                        font-size: 12px;
                        width: 160px;
                        overflow:hidden;
                    }
                    .des{
                        color:#666
                    }
                    span{
                        color: red;
                        font-size: 15px;
                        font-weight: 500;
                    }
                }
            }
        }
        .final{
            color:#aaa;
            font-size: 13px;
            text-align:center;
            font-weight: 300;
            height:90px;
            line-height:30px
        }

    }
    .sub{
        position:fixed;
        bottom:50px;
        z-index:15;
        background-color: #fff;
        height:50px;
        width: 100%;
        .allin{
            height:50px;
            line-height:50px;
            font-size:15px;
        }
        .outer{
            margin-top:14px;
        }
        p{
            font-size:15px;
            float:right;
            height:50px;
            line-height: 50px;
            margin-right:20px;
            color:red;
            width: 40px;
        }
        span{
            display: block;
            float:right;
            color:#000;
            height:50px;
            line-height: 50px;
            font-size:15px;
        }
        button{
            float:right;
            height:50px;
            line-height: 50px;
            width: 100px;
            border:none;
            text-align: center;
            background:rgb(240, 72, 72);
            color:#fff;
            font-size: 15px;
        }
        .del{
            width: 86px;
            height: 29px;
            line-height: 29px;
            border:none;
            border:1px solid #eee;
            text-align: center;
            background:#fff;
            float:right;
            border-radius: 20px;
            margin:10px;
            color:#000;
            font-size: 15px;
        }
    }
</style>
